<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<html>

<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>系统概览·数据工厂</title>
<link href="${pageContext.request.contextPath }/img/webLogoIcon.png" rel="shortcut icon">
<link href="${pageContext.request.contextPath }/css/bootstrap.min.css"
	rel="stylesheet">
<link
	href="${pageContext.request.contextPath }/font-awesome/css/font-awesome.css"
	rel="stylesheet">
<!-- FooTable -->
<link
	href="${pageContext.request.contextPath }/css/plugins/footable/footable.core.css"
	rel="stylesheet">

<link
	href="${pageContext.request.contextPath }/css/plugins/chosen/chosen.css"
	rel="stylesheet">

<link href="${pageContext.request.contextPath }/css/animate.css"
	rel="stylesheet">
<link href="${pageContext.request.contextPath }/css/style.css"
	rel="stylesheet">

</head>

<body>
	<div id="wrapper">
		<nav class="navbar-default navbar-static-side" role="navigation">
			<%request.setAttribute("LEFT", "system_overview");%>
			<%@include file="components/left.jsp"%>
		</nav>

		<div id="page-wrapper" class="gray-bg">
			<div class="row border-bottom">
				<jsp:include page="head.jsp" flush="true" />
			</div>

			<div class="wrapper wrapper-content animated fadeIn">

				<div class="row">

					<div class="col-sm-4">
						<h1 class="m-b-xs">26,900</h1>
						<small> 3日采集数据量 </small>
						<div id="sparkline1" class="m-b-sm"></div>
						<div class="row">
							<div class="col-xs-4">
								<small class="stats-label">活跃爬虫数</small>
								<h4>23 632 180</h4>
							</div>

							<div class="col-xs-4">
								<small class="stats-label">有效爬虫占比</small>
								<h4>92.11%</h4>
							</div>
							<div class="col-xs-4">
								<small class="stats-label">每小时抓取</small>
								<h4>58,202</h4>
							</div>
						</div>

					</div>
					<div class="col-sm-4">
						<h1 class="m-b-xs">98,100</h1>
						<small> 过去24小时采集状态 </small>
						<div id="sparkline2" class="m-b-sm"></div>
						<div class="row">
							<div class="col-xs-4">
								<small class="stats-label">活跃爬虫数</small>
								<h4>16 678 180</h4>
							</div>

							<div class="col-xs-4">
								<small class="stats-label">有效爬虫占比</small>
								<h4>95.45%</h4>
							</div>
							<div class="col-xs-4">
								<small class="stats-label">每小时抓取</small>
								<h4>62,044</h4>
							</div>
						</div>


					</div>
					<div class="col-sm-4">

						<div class="row m-t-xs">
							<div class="col-xs-6">
								<h5 class="m-b-xs">本月数据存储(G)</h5>
								<h1 class="no-margins">160.02</h1>
								<div class="font-bold text-navy">磁盘剩余68.3%</div>
							</div>
							<div class="col-xs-6">
								<h5 class="m-b-xs">本周数据存储(G)</h5>
								<h1 class="no-margins">42.12</h1>
								<div class="font-bold text-navy">
									存储增加4.2%</i>
								</div>
							</div>
						</div>


						<table class="table small m-t-sm">
							<tbody>
								<tr>
									<td><strong>142</strong> 新增站点</td>
									<td><strong>22</strong> 新增站点</td>

								</tr>
								<tr>
									<td><strong>61</strong> 新增类目</td>
									<td><strong>54</strong> 新增类目</td>
								</tr>
								<tr>
									<td><strong>154</strong> 新增爬虫</td>
									<td><strong>32</strong> 新增爬虫</td>
								</tr>
							</tbody>
						</table>



					</div>

				</div>

				<div class="row">
					<div class="col-lg-12">
						<div class="small pull-left col-md-3 m-l-lg m-t-md">
							<strong>最新12小时内数据工厂数据采集状态曲线图</strong>
						</div>
						<div class="small pull-right col-md-3 m-t-md text-right">
							<strong>最后更新时间在27分钟之前</strong>
						</div>
						<div class="flot-chart m-b-xl">
							<div class="flot-chart-content" id="flot-dashboard5-chart"></div>
						</div>
					</div>
				</div>

				<div class="row">
					<div class="col-lg-12">
						<div class="ibox">
							<div class="ibox-content">
								<div class="col-sm-3">
									<div class="form-group">
										<input type="text" id="order_id" name="order_id" value=""
											placeholder="站点名称" class="form-control">
									</div>
								</div>
								<div class="col-sm-3">
									<div class="form-group">
											<select data-placeholder="请选择" ..." disable_search="true"
												class="chosen-select" style="width: 100%;" tabindex="1">
												<option value="">站点类别</option>
												<option value="United States">门户网站</option>
												<option value="United Kingdom">百科数据</option>
											</select>
									</div>
								</div>
								<div class="col-sm-3">
									<div class="form-group">
											<select data-placeholder="请选择" ..." disable_search="true"
												class="chosen-select" style="width: 100%;" tabindex="2">
												<option value="">抓取状态</option>
												<option value="1">运行中</option>
												<option value="2">完成抓取</option>
												<option value="3">抓取失败</option>
											</select>
									</div>
								</div>
								<div class="col-sm-3">
									<div class="form-group">
											<select data-placeholder="请选择" ..." disable_search="true"
												class="chosen-select" style="width: 100%;" tabindex="3">
												<option value="">列表排序</option>
												<option value="1">最近完成</option>
												<option value="2">最早完成</option>
											</select>
									</div>
								</div>
								<table class="footable table table-stripped toggle-arrow-tiny"
									data-page-size="15" style="margin-top: 5%;">
									<thead>
										<tr>

											<th>编号</th>
											<th data-hide="phone">站点类别</th>
											<th data-hide="phone">站点名称</th>
											<th data-hide="phone">采集数量</th>
											<th data-hide="phone">服务器编号</th>
											<th data-hide="phone">运行负载</th>
											<th data-hide="phone">最后监测时间</th>
											<th class="phone">当前状态</th>

										</tr>
									</thead>
									<tbody id="databox">
									</tbody>
									<tfoot>
										<tr>
											<td colspan="7">
												<ul class="pagination pull-right"></ul>
											</td>
										</tr>
									</tfoot>
								</table>
							</div>
						</div>
					</div>
				</div>
			</div>
			<jsp:include page="components/footer.jsp" flush="true" />
		</div>
	</div>

	<!-- Mainly scripts -->
	<script src="${pageContext.request.contextPath }/js/jquery-2.1.1.js"></script>
	<script src="${pageContext.request.contextPath }/js/bootstrap.min.js"></script>
	<script
		src="${pageContext.request.contextPath }/js/plugins/metisMenu/jquery.metisMenu.js"></script>
	<script
		src="${pageContext.request.contextPath }/js/plugins/slimscroll/jquery.slimscroll.min.js"></script>

	<!-- Flot -->
	<script
		src="${pageContext.request.contextPath }/js/plugins/flot/jquery.flot.js"></script>
	<script
		src="${pageContext.request.contextPath }/js/plugins/flot/jquery.flot.tooltip.min.js"></script>
	<script
		src="${pageContext.request.contextPath }/js/plugins/flot/jquery.flot.spline.js"></script>
	<script
		src="${pageContext.request.contextPath }/js/plugins/flot/jquery.flot.resize.js"></script>
	<script
		src="${pageContext.request.contextPath }/js/plugins/flot/jquery.flot.pie.js"></script>
	<script
		src="${pageContext.request.contextPath }/js/plugins/flot/jquery.flot.symbol.js"></script>
	<script
		src="${pageContext.request.contextPath }/js/plugins/flot/jquery.flot.time.js"></script>

	<!-- Custom and plugin javascript -->
	<script src="${pageContext.request.contextPath }/js/inspinia.js"></script>
	<script
		src="${pageContext.request.contextPath }/js/plugins/pace/pace.min.js"></script>

	<!-- FooTable -->
	<script
		src="${pageContext.request.contextPath }/js/plugins/footable/footable.all.min.js"></script>
	<!-- Chosen -->
	<script
		src="${pageContext.request.contextPath }/js/plugins/chosen/chosen.jquery.js"></script>

	<!-- Sparkline -->
	<script
		src="${pageContext.request.contextPath }/js/plugins/sparkline/jquery.sparkline.min.js"></script>


	<script>
        $(document).ready(function () {
			var pointdata = [
				{
					"name":"企业数据",
					"lb":"企查查",
					"num":"12019231",
					"server":"1005",
					"fz":"23",
					"time":"2020/3/17 0:00:00",
				},
				{
					"name":"社交媒体",
					"lb":"微博",
					"num":"2109234",
					"server":"1007",
					"fz":"43",
					"time":"2020-02-25 10:35:48",
				},
				{
					"name":"资讯数据",
					"lb":"人民网",
					"num":"2092030",
					"server":"1005",
					"fz":"30",
					"time":"2020-02-25 10:35:48",
				},
				{
					"name":"招聘数据",
					"lb":"51job",
					"num":"1089231",
					"server":"1005",
					"fz":"10",
					"time":"2020-02-25 10:35:48",
				},
				{
					"name":"自媒体",
					"lb":"微信公众号",
					"num":"1010121",
					"server":"1005",
					"fz":"65",
					"time":"2020-02-25 10:35:48",
				},
				{
					"name":"社交媒体",
					"lb":"知乎",
					"num":"1009023",
					"server":"1005",
					"fz":"67",
					"time":"2020-02-25 10:35:48",
				},
				{
					"name":"学术数据",
					"lb":"爱学术",
					"num":"990312",
					"server":"1005",
					"fz":"87",
					"time":"2020-02-25 10:35:48",
				},
				{
					"name":"汽车行业",
					"lb":"汽车之家",
					"num":"970121",
					"server":"1005",
					"fz":"23",
					"time":"2020-02-25 10:35:48",
				},
				{
					"name":"法律数据",
					"lb":"无讼",
					"num":"890231",
					"server":"1005",
					"fz":"45",
					"time":"2020-02-25 10:35:48",
				},
				{
					"name":"知识产权",
					"lb":"知查查",
					"num":"790231",
					"server":"1005",
					"fz":"32",
					"time":"2020-02-25 10:35:48",
				},
				{
					"name":"房产数据",
					"lb":"链家",
					"num":"707549",
					"server":"1005",
					"fz":"72",
					"time":"2020-02-25 10:35:48",
				},
				{
					"name":"境外数据",
					"lb":"BBC",
					"num":"790231",
					"server":"1005",
					"fz":"32",
					"time":"2020-02-25 10:35:48",
				},
				{
					"name":"短视频",
					"lb":"抖音",
					"num":"670961",
					"server":"1005",
					"fz":"65",
					"time":"2020-02-25 10:35:48",
				},
				{
					"name":"投诉数据",
					"lb":"黑猫投诉",
					"num":"330923",
					"server":"1005",
					"fz":"23",
					"time":"2020-02-25 10:35:48",
				},
				{
					"name":"传媒数据",
					"lb":"新浪娱乐",
					"num":"249088",
					"server":"1005",
					"fz":"45",
					"time":"2020-02-25 10:35:48",
				},
				
				{
					"name":"招标投标",
					"lb":"政府采购网",
					"num":"209234",
					"server":"1005",
					"fz":"89",
					"time":"2020-02-25 10:35:48",
				},
				{
					"name":"政府数据",
					"lb":"国务院",
					"num":"192092",
					"server":"1005",
					"fz":"72",
					"time":"2020-02-25 10:35:48",
				},
				{
					"name":"电商数据",
					"lb":"天猫商城",
					"num":"150923",
					"server":"1005",
					"fz":"20",
					"time":"2020-02-25 10:35:48",
				},
				{
					"name":"学术数据",
					"lb":"知网",
					"num":"90312",
					"server":"1005",
					"fz":"32",
					"time":"2020-02-25 10:35:48",
				},
				{
					"name":"证券数据",
					"lb":"东方财富",
					"num":"90923",
					"server":"1005",
					"fz":"18",
					"time":"2020-02-25 10:35:48",
				}
			]
			var datahtml = ''
			for (var i = 0; i < pointdata.length; i++) {
				if (pointdata[i].fz>=80) {
					fz = "label-danger"
				}else if(pointdata[i].fz<65){
					fz = "label-primary"
				}else{
					fz = "label-warning"
				}
				datahtml+=
					'<tr>'+
						'<td style="text-align:center">'+(i+1)+'</td>'+
						'<td>'+pointdata[i].name+'</td>'+
						'<td>'+pointdata[i].lb+'</td>'+
						'<td>'+pointdata[i].num+'</td>'+
						'<td>'+(1005+i)+'</td>'+
						'<td><span class="label '+fz+'">'+pointdata[i].fz+'%</span></td>'+
						'<td>2020/3/17 0:00:00</td>'+
						'<td class="text-center"><a href="#"><i class="fa fa-check text-navy"></i></a></td>'+
					'</tr>'
			}
			$("#databox").html(datahtml)
					
            $('.footable').footable();
            $('.chosen-select').chosen({
                search_contains: true, //设置全文查询
                disable_search_threshold: 200 //当下拉列表中的选项<4 时隐藏搜索功能
            });

            var config = {
                '.chosen-select'           : {},
                '.chosen-select-deselect'  : {allow_single_deselect:true},
                '.chosen-select-no-single' : {disable_search_threshold:10},
                '.chosen-select-no-results': {no_results_text:'Oops, nothing found!'},
                '.chosen-select-width'     : {width:"65%"}
                }
            for (var selector in config) {
                $(selector).chosen(config[selector]);
            }

            var sparklineCharts = function () {
                $("#sparkline1").sparkline([34, 43, 43, 35, 44, 32, 44, 52], {
                    type: 'line',
                    width: '100%',
                    height: '50',
                    lineColor: '#1ab394',
                    fillColor: "transparent"
                });

                $("#sparkline2").sparkline([32, 11, 25, 37, 41, 32, 34, 42], {
                    type: 'line',
                    width: '100%',
                    height: '50',
                    lineColor: '#1ab394',
                    fillColor: "transparent"
                });

                $("#sparkline3").sparkline([34, 22, 24, 41, 10, 18, 16, 8], {
                    type: 'line',
                    width: '100%',
                    height: '50',
                    lineColor: '#1C84C6',
                    fillColor: "transparent"
                });
            };

            var sparkResize;

            $(window).resize(function (e) {
                clearTimeout(sparkResize);
                sparkResize = setTimeout(sparklineCharts, 500);
            });

            sparklineCharts();




            var data1 = [
                [0, 4], [1, 8], [2, 5], [3, 10], [4, 4], [5, 16], [6, 5], [7, 11], [8, 6], [9, 11], [10, 20], [11, 10], [12, 13], [13, 4], [14, 7], [15, 8], [16, 12]
            ];
            var data2 = [
                [0, 0], [1, 2], [2, 7], [3, 4], [4, 11], [5, 4], [6, 2], [7, 5], [8, 11], [9, 5], [10, 4], [11, 1], [12, 5], [13, 2], [14, 5], [15, 2], [16, 0]
            ];
            $("#flot-dashboard5-chart").length && $.plot($("#flot-dashboard5-chart"), [
                data1, data2
            ],
                {
                    series: {
                        lines: {
                            show: false,
                            fill: true
                        },
                        splines: {
                            show: true,
                            tension: 0.4,
                            lineWidth: 1,
                            fill: 0.4
                        },
                        points: {
                            radius: 0,
                            show: true
                        },
                        shadowSize: 2
                    },
                    grid: {
                        hoverable: true,
                        clickable: true,

                        borderWidth: 2,
                        color: 'transparent'
                    },
                    colors: ["#1ab394", "#1C84C6"],
                    xaxis: {
                    },
                    yaxis: {
                    },
                    tooltip: false
                }
            );

        });
        var data2 = 
        	[
				{
					"name":"企业数据",
					"lb":"企业数据",
					"num":"12019231",
					"server":"1006",
					"fz":"23",
					"time":"2020/3/17 0:00:00",
				},
				{
					"name":"社交媒体",
					"lb":"微博",
					"num":"2109234",
					"server":"1007",
					"fz":"43",
					"time":"2020-02-25 10:35:48",
				},
				{
					"name":"资讯数据",
					"lb":"门户网站",
					"num":"2092030",
					"server":"1005",
					"fz":"30",
					"time":"2020-02-25 10:35:48",
				},
				{
					"name":"招聘数据",
					"lb":"51job",
					"num":"1089231",
					"server":"1005",
					"fz":"10",
					"time":"2020-02-25 10:35:48",
				},
				{
					"name":"自媒体",
					"lb":"微信公众号",
					"num":"1010121",
					"server":"1005",
					"fz":"65",
					"time":"2020-02-25 10:35:48",
				},
				{
					"name":"社交媒体",
					"lb":"知乎",
					"num":"1009023",
					"server":"1005",
					"fz":"67",
					"time":"2020-02-25 10:35:48",
				},
				{
					"name":"学术数据",
					"lb":"学术报告",
					"num":"990312",
					"server":"1005",
					"fz":"87",
					"time":"2020-02-25 10:35:48",
				},
				{
					"name":"汽车行业",
					"lb":"汽车资讯",
					"num":"970121",
					"server":"1005",
					"fz":"23",
					"time":"2020-02-25 10:35:48",
				},
				{
					"name":"法律数据",
					"lb":"被执行人",
					"num":"890231",
					"server":"1005",
					"fz":"45",
					"time":"2020-02-25 10:35:48",
				},
				{
					"name":"知识产权",
					"lb":"专利",
					"num":"790231",
					"server":"1005",
					"fz":"32",
					"time":"2020-02-25 10:35:48",
				},
				{
					"name":"房产数据",
					"lb":"楼盘信息",
					"num":"707549",
					"server":"1005",
					"fz":"72",
					"time":"2020-02-25 10:35:48",
				},
				{
					"name":"境外数据",
					"lb":"专利",
					"num":"790231",
					"server":"1005",
					"fz":"32",
					"time":"2020-02-25 10:35:48",
				},
				{
					"name":"短视频",
					"lb":"抖音",
					"num":"670961",
					"server":"1005",
					"fz":"65",
					"time":"2020-02-25 10:35:48",
				},
				{
					"name":"投诉数据",
					"lb":"黑猫投诉",
					"num":"330923",
					"server":"1005",
					"fz":"23",
					"time":"2020-02-25 10:35:48",
				},
				{
					"name":"传媒数据",
					"lb":"娱乐资讯",
					"num":"249088",
					"server":"1005",
					"fz":"45",
					"time":"2020-02-25 10:35:48",
				},
				
				{
					"name":"招标投标",
					"lb":"政府",
					"num":"209234",
					"server":"1005",
					"fz":"89",
					"time":"2020-02-25 10:35:48",
				},
				{
					"name":"政府数据",
					"lb":"中央政府",
					"num":"192092",
					"server":"1005",
					"fz":"72",
					"time":"2020-02-25 10:35:48",
				},
				{
					"name":"电商数据",
					"lb":"天猫商城",
					"num":"150923",
					"server":"1005",
					"fz":"20",
					"time":"2020-02-25 10:35:48",
				},
				{
					"name":"学术数据",
					"lb":"专家人才",
					"num":"90312",
					"server":"1005",
					"fz":"32",
					"time":"2020-02-25 10:35:48",
				},
				{
					"name":"证券数据",
					"lb":"公告数据",
					"num":"90923",
					"server":"1005",
					"fz":"18",
					"time":"2020-02-25 10:35:48",
				}
			]
    </script>
</body>

</html>